<template>
  <div class="HomeGridBanners">
    <van-grid :border="false" :gutter="9" :column-num="2">
      <van-grid-item v-for="product in columns2Products" :key="product.imageUrl"
                     @click.stop="handleTo(product.to)">
        <van-image :src="product.imageUrl"/>
      </van-grid-item>
    </van-grid>
    <white-space/>
    <van-grid :border="false" :gutter="9" :column-num="4">
      <van-grid-item v-for="product in columns4Products" :key="product.imageUrl"
                     @click.stop="handleTo(product.to)">
        <van-image :src="product.imageUrl"/>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { Grid, GridItem, Image } from "vant"
import WhiteSpace from "@/components/WhiteSpace"

const COLUMNS2_PRODUCTS = [
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1sk0gvlfltfffn.png",
    to: "/products/359",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1ri8wnlfltj641.png",
    to: "/products/358",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1ricjelfltdu1n.png",
    to: "/products/357",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1shgsulflt6t4a.png",
    to: "/products/360",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1ria99lfltaitg.png",
    to: "/products/361",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1ri9ntlfltfzz1.png",
    to: "/products/342",
  },
]
const COLUMNS4_PRODUCTS = [
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1rbzjklfltedy2.png",
    to: "/products/330",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1rbz5dlfltgwew.png",
    to: "/products/339",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1rbzt3lflt3wfj.png",
    to: "/products/341",
  },
  {
    imageUrl: "http://static.mallfoundry.com/2020/10/09/kg1rbzo1lflt2pmg.png",
    to: "/products/330",
  },

]

export default {
  name: "HomeGridProducts",
  components: {
    WhiteSpace,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
  },
  data() {
    return {
      columns2Products: COLUMNS2_PRODUCTS,
      columns4Products: COLUMNS4_PRODUCTS,
    }
  },
  methods: {
    handleTo(url) {
      if (url) {
        this.$router.push(url)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.HomeGridBanners {
  ::v-deep .van-grid-item__content {
    padding: initial;
    background-color: initial;
  }
}
</style>
